<!--
 作者 王建鑫.json
 创作日期 2019.9.2
 描述：顾客解绑操作记录
 -->
<template>
  <div>
    <div class="row-header">
      <el-form :model="form" :inline="true" label-width="50px" >
        <el-form-item label=" " prop="cardNum">
          <el-input placeholder="请输入业务号码" size="small" v-model.trim="form.cardNumber" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label=" " prop="nickName">
          <el-input placeholder="请输入顾客昵称" size="small" v-model="form.customerNickName" style="width: 100%;"></el-input>
        </el-form-item>
    </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="small" icon="el-icon-search" @click="currentPage = 1 ; initData()">查询</el-button>
        <el-button type="shenda" size="small" icon="el-icon-setting" @click="notTie">解绑操作</el-button>
      </div>
  </div>
    <div class="split-line"></div>
  <div class="row-main">
    <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }" :data="tableData" tooltip-effect="dark" class="row-main-table" @selection-change="handleSelectionChange" v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
      <el-table-column prop="customerNickName" label="被解除用户昵称" align="center"></el-table-column>
      <el-table-column prop="cardNumber" label="业务号码" align="center"></el-table-column>
      <el-table-column prop="iccid" label="iccid" align="center"></el-table-column>
      <el-table-column prop="reason" label="原因" align="center"></el-table-column>
      <el-table-column prop="operatorName" label="操作人" align="center"></el-table-column>
      <el-table-column prop="insertTimeTime" label="操作时间" align="center"></el-table-column>
    </el-table>
    <el-pagination class="row-main-pager" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalPage" :page-sizes="[10,20,50,100]" background></el-pagination>

  </div>
  <!--卡详情查看-->
  <el-dialog class="accountView" title="解绑操作" top="20vh" :visible.sync="cardDetailView" :append-to-body="true" width="30%">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="业务号码">
        <el-input v-model.trim="cardNumber" size="small" @change="searchCard"></el-input><br>
      </el-form-item>
      <el-form-item label="ICCID" v-if="checkPer('curentFlowForMonthVPer')">
        <div>{{iccid}}</div>
      </el-form-item>
      <el-form-item label="用户昵称">
        <div>{{customerNickName}}</div>
      </el-form-item>
      <el-form-item label="原因">
        <el-input v-model="reason" size="small"></el-input>
      </el-form-item>
    </el-form><span class="dialog-footer" slot="footer">
      <el-button @click="save" size="small" :disabled="saveDisabled">解绑</el-button>
      <el-button type='primary' @click="cardDetailView = false" size="small">关 闭</el-button></span>
  </el-dialog>
</div>
</template>

<script>
  import { customerBindingList,customerBindingSelectCardByCardNumber,customerBindingSave} from '@/api/getData'

  export default {
    name: 'customerBindingHis',
    data() {
      return {
        pageSize: 10,
        currentPage: 1,
        ascs: [],
        descs: ['insertTime'],
        maxPage: 1,
        tableData: [],
        searchLoading: false,
        totalPage: 0,
        pageSize: 10,
        tableLoading:false,
        cardNumber:'',
        form:{
          cardNumber:'',
          customerNickName:''
        },
        iccid:'',
        cardDetailView:false,
        customerNickName:'',
        saveDisabled:true,
        reason:''
      };
    },
    created() {
      this.initData()
    },
    methods: {
      async initData(theKey) {
        this.tableLoading = true;
        const returnData = await customerBindingList({
            cardNumber: this.form.cardNumber,
            customerNickName: this.form.customerNickName,
            page: {
              current: this.currentPage + '',
              size: this.pageSize + '',
              ascs: this.ascs,
              descs: this.descs
            }
          },
          {
            obj: this,
            key: 'tableLoading'
          })
        this.tableData = []
        if (returnData._result) {
          this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
          this.totalPage = returnData.data.total
          returnData.data.records.map(item => {
            const obj = {}
            obj.customerId=item.customerId
            obj.customerNickName=item.customerNickName
            obj.iccid=item.iccid
            obj.reason=item.reason
            obj.operatorName=item.operatorName
            obj.cardNumber=item.cardNumber
            obj.insertTimeTime=item.insertTimeTime
            this.tableData.push(obj)
          })
          this.tableLoading = false
        }
      },
      handleSelectionChange(val) {
          this.tableChecked = val
          const length = this.tableChecked.length
          //console.log(`共 ${length} 条`)
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.initData()
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`)
        this.currentPage = val
        this.initData()
      },
      searchHandle() {
        this.initData('searchLoading')
      },
      notTie(){
        this.cardDetailView = true
        this.cardId=''
        this.customerId=''
        this.customerNickName=''
        this.reason=''
        this.cardNumber=''
        this.iccid=''
      },
      async searchCard(){
        let obj=await  customerBindingSelectCardByCardNumber({
          cardNumber:this.cardNumber
        });
        if(obj._result){
          this.iccid = obj.data.iccid;
          this.customerNickName = obj.data.customerNickName;
          this.cardId = obj.data.id;
          this.customerId = obj.data.customerId;

          this.saveDisabled = false
        }
      },
      save(){

        if(this.reason==''){
          this.$message.error("请输入解绑原因！")
          return
        }
        this.$confirm('确定要解绑么？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let a = await customerBindingSave({
            cardId:this.cardId,
            customerId:this.customerId,
            customerNickName:this.customerNickName,
            reason:this.reason,
            iccid:this.iccid,
            cardNumber:this.cardNumber
          });
          if(a._result){
            this.$message.success("操作成功！")
            this.initData();
            this.saveDisabled = true
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除3'
          });
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .block {
    float: right;
    position: relative;
  }
</style>

